<template>
  <div class="_wz_cent_main _wz_hiddenOverview">
    <div style="width: 100%;height: 100%;">
      <Row :gutter="10" style="height:340px;">
        <i-col span="14" style="height: 100%;">
          <Card dis-hover style="height: 100%;">
            <p slot="title">我的待办</p>
            <Row :gutter="10" style="height: 100%">
              <template v-for="iten in myToDo">
                <i-col span="6" style="height: 100%;width: calc(100% / 5);">
                  <div style="height: 240px;display: flex;justify-content: center;align-items: center;">
                    <i-circle :percent="!!iten.value ? 80 : 0" :stroke-color="iten.color" :size="140">
                      <div style="font-size:16px;line-height: 40px;">{{iten.name}}</div>
                      <div style="font-size:24px">{{ iten.value }}</div>
                    </i-circle>
                  </div>
                </i-col>
              </template>
            </Row>
          </Card>

        </i-col>
        <i-col span="10" style="height: 100%;">
          <Card dis-hover style="height:100%;">
            <p slot="title">隐患信息</p>
            <Row :gutter="10" style="height: calc(100% / 2 - 5px);">
              <i-col span="12" style="height: 100%;">
                <div class="wyx-style" style="background: #fc6260;">
                  <div style="font-size: 32px">{{ statisTics.majorDanger?statisTics.majorDanger: 0}}</div>
                  <div>未关闭环重大隐患</div>
                </div>
              </i-col>
              <i-col span="12" style="height: 100%; ">
                <div class="wyx-style" style="background: #ffc03d;">
                  <div style="font-size: 32px">{{ statisTics.generalDanger?statisTics.generalDanger: 0}}</div>
                  <div>未关闭环一般隐患</div>
                </div>
              </i-col>
            </Row>
            <Row :gutter="10" style="height: calc(100% / 2 - 5px);margin-top: 10px">
              <i-col span="8" style="height: 100%;">
                <div class="wyx-style" style="background: #52c1f6;">
                  <div style="font-size: 32px">{{ statisTics.allDanger?statisTics.allDanger: 0}}</div>
                  <div>隐患总数量</div>
                </div>
              </i-col>
              <i-col span="8" style="height: 100%;">
                <div class="wyx-style" style="background: #257ee4;">
                  <div style="font-size: 32px">{{ statisTics.overdueDanger ? statisTics.overdueDanger : 0 }}</div>
                  <div>逾期未整改隐患</div>
                </div>
              </i-col>
              <i-col span="8" style="height: 100%;">
                <div class="wyx-style" style="background: #007dfe;">
                  <div style="font-size: 32px">{{ (statisTics.handleDangerRate ? statisTics.handleDangerRate : 0) + '%' }}</div>
                  <div>隐患整改率</div>
                </div>
              </i-col>
            </Row>
          </Card>
        </i-col>
      </Row>
      <Row :gutter="10" style="height:calc(100% - 340px - 10px);margin-top: 10px">
        <i-col span="24" style="height: 100%;">
          <Card dis-hover style="height:  100%;">
            <div slot="title" style="display: flex;align-items: center;">
              <template v-for="item,index in mueList">
                <div :class="indexStyle == index?'indexStyle':''" style="cursor:pointer;margin-right: 20px;padding: 5px; border-radius: 5px;" @click="toggleClick(index)">{{ item }}</div>
              </template>
            </div>
            <div style="height: 100%;" ref="lineChart2H">
              <lineChart6 :bottomHeight="lineChart2H" v-if="lineChart2H !== 0 && lineChart6PoliceData.type" :lineChart6Data="lineChart6PoliceData"></lineChart6>
            </div>
          </Card>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>

import lineChart6 from "../../components/Chart/lineChart/lineChart6";
import lineChart1 from "../../components/Chart/lineChart/lineChart6";

export default {
  components: {
    lineChart6,
    lineChart1,
  },
  data() {
    return {
      statisTics: {},//隐患信息
      liabilityUnit:[],
      Position:[],
      year: [],
      monthly: [],
      lineChart2H: 0,
      bingTuType: true,
      indexStyle: 0, // 高亮
      lineChart6PoliceData: {//车辆、挂车年限统计
        type: false,
        "id": "charId7",
        "data": [],
        "unit": "公里",
        "style": {
          "padding": [30, 38, 38, 38]
        }
      },
      mueList: ['隐患区域','月度隐患','年度隐患'],
      // mueList: ['排查单位','隐患区域','月度隐患','年度隐患'],
      myToDo:[
        {name:'待排查',value:0,color:'#0a9afe'},
        {name:'待上报',value:0,color:'#ff9900'},
        {name:'待核查',value:0,color:'#f0657d'},
        {name:'待整改',value:0,color:'#a51ee3'},
        {name:'待验收',value:0,color:'#a9a80b'}
      ]
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    that.$nextTick(function () {
      that.lineChart2H = that.$refs.lineChart2H.offsetHeight;
      window.onresize = function () {
        that.lineChart2H = that.$refs.lineChart2H.offsetHeight;
      };
    })


    that.axios.post(that.apiUrl.statisticsPcRiskStatistics, {}).then(res => {
      if(!!res){
        let riskStatistics = res.data.data;

        //我的待办
        let upcomingStatistics = riskStatistics.upcomingStatistics.data;
        that.myToDo = [
          {name:'待排查',value:upcomingStatistics.inspectCount,color:'#0a9afe'},
          {name:'待上报',value:upcomingStatistics.inspectReportCount,color:'#ff9900'},
          {name:'待核查',value:upcomingStatistics.dangerReportCheckCount,color:'#f0657d'},
          {name:'待整改',value:upcomingStatistics.dangerReportHandlerCount,color:'#a51ee3'},
          {name:'待验收',value:upcomingStatistics.dangerReportReviewCount,color:'#a9a80b'}
        ]


        //隐患信息
        that.statisTics = riskStatistics.inspectStatistics.data;

        // //排查单位
        // let liabilityUnit = riskStatistics.inOrgRiskStatistics.data;
        // liabilityUnit.forEach((k, i) => {
        //   that.liabilityUnit.push({company: k.type, type: k.key, value: k.value})
        // })
        // that.lineChart6PoliceData.data =  that.liabilityUnit;
        // that.lineChart6PoliceData.type = true;

        //隐患区域
        let Position = riskStatistics.riskPositionStatistics.data;
        Position.forEach((k, i) => {
          that.Position.push({company: k.type, type: k.key, value: k.value})
        })
        that.lineChart6PoliceData.data =  that.Position;
        that.lineChart6PoliceData.type = true;

        //月度隐患
        let monthly = riskStatistics.inspectMonthStatistics.data;
        monthly.forEach((k, i) => {
          that.monthly.push({company: k.type, type: k.key, value: k.value})
        })

        //年度隐患
        let year = riskStatistics.inspectYearStatistics.data;
        year.forEach((k, i) => {
          that.year.push({company: k.type, type: k.key, value: k.value})
        })



      }

    }).catch(err => {
      console.log("失败", err)
    })


  },
  methods: {//执行的方法
    toggleClick(index) {
      var that = this
      this.indexStyle = index
      that.lineChart6PoliceData.type = false;
      // if (index == 0) {
      //   that.lineChart6PoliceData.data = that.liabilityUnit
      //   that.$nextTick(function () {
      //     that.lineChart6PoliceData.type = true;
      //   });
      // } else
        if (index == 0) {
        that.lineChart6PoliceData.data =  that.Position
        that.$nextTick(function () {
          that.lineChart6PoliceData.type = true;
        });
      } else if (index == 1) {
        that.lineChart6PoliceData.data = that.monthly
        that.$nextTick(function () {
          that.lineChart6PoliceData.type = true;
        });
      } else if (index == 2) {
        that.lineChart6PoliceData.data = that.year
        that.$nextTick(function () {
          that.lineChart6PoliceData.type = true;
        });
      }
    },

  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_hiddenOverview {
  height: 843px !important;

  .ivu-card-body {
    padding: 8px !important;
    height: calc(100% - 51px);
  }

  .indexStyle {
    //background: #1E9FFF;
    color: #1E9FFF
  }


  .g2-guide-html {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

  }

  .g2-guide-html.title {
    font-size: 12px;
    color: #8c8c8c;
    font-weight: 20;
  }

  .g2-guide-html .value {
    font-size: 22px;
    color: #000;
    font-weight: bold;
  }

  .wyx-style {
    height: 100%;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center
  }

}

</style>
